<template>
  <transition name="fade">
    {{options}}
    <!--主要内容-->
    <div class="notice-bar" :style="getStyle('area')">
      <div ref="back" class="back" :class="{'no-scroll':(!(data.scrollable)&&(data.position==='center'))}">
        <span ref="text" :style="getStyle('desc')" class="text">
          {{ data.text ? data.text : '通知内容' }}
        </span>
      </div>
    </div>
  </transition>
</template>
<script>
import {pxToVw} from "@/utils/common";

export default {
  name: "NoticeBarInfo",

  componentName: "NoticeBarInfo",

  props: {
    options: {
      type: Object,
      default() {
        return {
          text: '默认'
        };
      }
    }
  },

  data() {
    return {
      speed: this.options.speed, // 速度（单位px/s）
      backWidth: '', // 父级宽度
      backHeight: '', // 父级高度
      wordLength: '', // 文本长度
      state: 1,
      firstAnimationTime: '', // 状态一动画效果
      secondAnimationTime: '', // 状态二动画效果
      data: this.options
    };
  },

  computed: {
    getStyle() {
      return function (val) {
        let Obj = Object();
        let {fontSize, fontWeight, color, background} = this.data;
        switch (val) {
          case 'desc':
            Reflect.set(Obj, 'fontSize', pxToVw(fontSize || 16));
            Reflect.set(Obj, 'color', (color || '#000000'));
            Reflect.set(Obj, 'fontWeight', (fontWeight || "normal"));
            return Obj;
          case 'area':
            Reflect.set(Obj, 'fontWeight', (background || "transparent"));
            return Obj;
        }
      }
    }
  },

  methods: {
    // 获取数据
    getData() {
      let style = document.styleSheets[0];
      let text = this.$refs.text;
      let back = this.$refs.back;
      if (!!back && !!text && !!(this.data.scrollable)) {
        this.backWidth = back.offsetWidth;
        this.backHeight = back.offsetHeight;
        this.wordLength = text.offsetWidth;
        this.ComputationTime(); // 计算时间
        style.insertRule(
            `@keyframes firstAnimation {0%   {left:0px;}100%  {left:-${this.wordLength}px;}}`
        );
        style.insertRule(
            `@keyframes secondAnimation {0%   {left:${this.backWidth}px;}100%  {left:-${this.wordLength}px;}}`
        );
        setTimeout(res => {
          this.changeState();
        }, this.data.delay);
      }

    },
    // 用速度计算时间（想要保持速度一样，2种状态时间不同需算出）
    ComputationTime() {
      this.firstAnimationTime = this.wordLength / this.speed || 50;

      this.secondAnimationTime =
          (this.wordLength + this.backWidth) / this.speed || 50;
    },
    // 根据状态切换动画
    changeState() {
      this.$nextTick(() => {
        let text = this.$refs.text;
        if (!!text) {
          if (parseInt(this.state) === 1) {
            text.style.animation = `firstAnimation ${this.firstAnimationTime}s linear`;
            this.state = 2;
          } else {
            text.style.animation = `secondAnimation ${this.secondAnimationTime}s linear infinite`;
          }
        }
      })
    },

    Listener() {
      let text = this.$refs.text;
      text.addEventListener(
          'animationend',
          res => {
            this.changeState();
          },
          false
      );
    }
  },

  mounted() {
    this.Listener();
    setTimeout(res => {
      this.getData();
    }, 500);
  }
};
</script>
<style lang="scss" scoped>
.notice-bar {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: transparent;

  .back {
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    align-self: center;
    align-items: center;

    .text {
      position: absolute;

      display: inline-block;
      padding: 2px 0;

    }
  }

  .no-scroll {
    justify-content: center;
  }
}
</style>